@extends('home/main/layout')
@section('content')
    <link href="/home/css/comment_style.css" rel="stylesheet" type="text/css"/>
    <div id="comment_header">
        <div id="comment_nul">
            <ul class="comment_ul">
                <a href="/single/{{$id}}"><li>商品详情</li></a>
                <a href=""><li style="background: white;">商品评价({{$arr['count']}})</li></a>
                <a href="#"><li style="float: right;color:blue">加入购物车</li></a>
            </ul>
            <br>
        </div>
        <br>
        <div class="shop_pj">&nbsp;&nbsp;<a href="/single/{{$id}}">商品详情</a> &nbsp;>&nbsp;商品评价：</div>
        {{--商品评价图形--}}
        <div class="shop_map">
            <div class="shop_baifenbi">
                <span class="shop_bfb">{{$arr['good']/$arr['count']*100}}</span><span style="font-size: 20px;">%</span>
            </div>
            {{--百分比条--}}
            <div class="shop_baifenbi">
                <dl>
                    <dt>好评<span>({{$arr['good']/$arr['count']*100}}%)</span></dt>
                    <dd class="shop_map_dd">
                        <div class="shop_map_dd_div" style="width: {{$arr['good']/$arr['count']*100}}px;"></div>
                    </dd>
                </dl>
                <dl>
                    <dt>中评<span>({{$arr['well']/$arr['count']*100}}%)</span></dt>
                    <dd class="shop_map_dd">
                        <div class="shop_map_dd_div" style="width:{{$arr['well']/$arr['count']*100}}px;"></div>
                    </dd>
                </dl>
                <dl>
                    <dt>差评<span>({{$arr['bad']/$arr['count']*100}}%)</span></dt>
                    <dd class="shop_map_dd">
                        <div class="shop_map_dd_div" style="width:{{$arr['bad']/$arr['count']*100}}px;"></div>
                    </dd>
                </dl>
            </div>
        </div>
        {{--商品评价图形--}}
        <div class="shop_pj">
            <ul>
                <li id="all_comment">全部评论({{$arr['count']}})</li>
                <li id="good_comment">好评({{$arr['good']}})</li>
                <li id="well_comment">中评({{$arr['well']}})</li>
                <li id="bad_comment">差评({{$arr['bad']}})</li>
            </ul>
        </div>
    </div>
    {{--全部--}}
    <div class="comment_list">
        @foreach($data as $v)
        {{--单条评论  循环体--}}
                <div class="comments_item_one">
            <div class="comments_item_one_left">
                <div class="grade-star g-star5"></div>
                {{--<div class="comment-day type-item">收货7天后评论</div>--}}
                <div class="comment-time type-item">{{date('Y-m-d H:i:s',$v->ptime)}}</div>
                <div class="features type-item">
                    <ul class="clearfix">
                        <li>{{$v->score}}分</li>
                        <li>{{$v->keyword}}</li>
                    </ul>
                </div>
            </div>
            <div class="comments_item_one_center">
                <div class="p-comment">{{$v ->content}}</div>
                <div class="p-otherFeatures">
                    <ul class="clearfix"></ul>
                </div>
                <div class="p-comment"><a class="div_display" data-replylz="1">回复（0）</a></div>
                <div class="send_inner" style="display:none;"><textarea class="reply-input J-reply-input" placeholder="回复 {{$v->nickname}}：" maxlength="120"
                                                                        style="width:90%;resize:none; margin-top: 0px; margin-bottom: 0px; height: 32px;"></textarea>
                    <div style="float: right"><span class="txt-countdown">还可以输入<em>120</em>字</span><button onclick="input_submit()">提交</button></div>
                </div>
                <div class="comment-replylist"></div>
            </div>
            <div class="comments_item_one_right">
                <div class="user-item clearfix"><img
                            src="/uplodes/member/{{$v->pic}}"
                            width="25px" height="25px" alt="超***1" class="user-ico">
                    <div class="user-name">{{$v->nickname}}</div>
                </div>
                <div class="type-item"><span class="u-vip-level" style="color:gold">{{$v->permission}}</span> <span
                            class="u-addr"></span></div>
                <div class="user-item" data-cid="2"><span class="user-access"><a
                                href="http://app.jd.com/iphone.html" target="_blank"></a></span></div>
            </div>
        </div>
        {{--单条评论  循环体结束--}}
        @endforeach
    </div>
    {{--好评--}}
    <div class="comment_list" style="display: none;">
        @foreach($data as $v)
            @if($v->score > 80)
            {{--单条评论  循环体--}}
            <div class="comments_item_one">
                <div class="comments_item_one_left">
                    <div class="grade-star g-star5"></div>
                    <div class="comment-day type-item">收货7天后评论</div>
                    <div class="comment-time type-item">{{date('Y-m-d H:i:s',$v->ptime)}}</div>
                    <div class="features type-item">
                        <ul class="clearfix">
                            <li>{{$v->score}}分</li>
                            <li>{{$v->keyword}}</li>
                        </ul>
                    </div>
                </div>
                <div class="comments_item_one_center">
                    <div class="p-comment">{{$v ->content}}</div>
                    <div class="p-otherFeatures">
                        <ul class="clearfix"></ul>
                    </div>
                    <div class="p-comment"><a class="div_display" data-replylz="1">回复（0）</a></div>
                    <div class="send_inner" style="display:none;"><textarea class="reply-input J-reply-input" placeholder="回复 {{$v->nickname}}：" maxlength="120"
                                                                            style="width:90%;resize:none; margin-top: 0px; margin-bottom: 0px; height: 32px;"></textarea>
                        <div style="float: right"><span class="txt-countdown">还可以输入<em>120</em>字</span><button onclick="input_submit()">提交</button></div>
                    </div>
                    <div class="comment-replylist"></div>
                </div>
                <div class="comments_item_one_right">
                    <div class="user-item clearfix"><img
                                src="/uplodes/member/{{$v->pic}}"
                                width="25px" height="25px" alt="超***1" class="user-ico">
                        <div class="user-name">{{$v->nickname}}</div>
                    </div>
                    <div class="type-item"><span class="u-vip-level" style="color:gold">{{$v->permission}}</span> <span
                                class="u-addr"></span></div>
                    <div class="user-item" data-cid="2"><span class="user-access"><a
                                    href="http://app.jd.com/iphone.html" target="_blank"></a></span></div>
                </div>
            </div>
            {{--单条评论  循环体结束--}}
            @endif
        @endforeach
    </div>
    {{--中评--}}
    <div class="comment_list" style="display: none;">
        @foreach($data as $v)
            {{--单条评论  循环体--}}
            @if($v->score > 60 and $v->score<80 or $v->score==80)
            <div class="comments_item_one">
                <div class="comments_item_one_left">
                    <div class="grade-star g-star5"></div>
                    {{--<div class="comment-day type-item">收货7天后评论</div>--}}
                    <div class="comment-time type-item">{{date('Y-m-d H:i:s',$v->ptime)}}</div>
                    <div class="features type-item">
                        <ul class="clearfix">
                            <li>{{$v->score}}分</li>
                            <li>{{$v->keyword}}</li>
                        </ul>
                    </div>
                </div>
                <div class="comments_item_one_center">
                    <div class="p-comment">{{$v ->content}}</div>
                    <div class="p-otherFeatures">
                        <ul class="clearfix"></ul>
                    </div>
                    <div class="p-comment"><a class="div_display" data-replylz="1">回复（0）</a></div>
                    <div class="send_inner" style="display:none;"><textarea class="reply-input J-reply-input" placeholder="回复 {{$v->nickname}}：" maxlength="120"
                                                                            style="width:90%;resize:none; margin-top: 0px; margin-bottom: 0px; height: 32px;"></textarea>
                        <div style="float: right"><span class="txt-countdown">还可以输入<em>120</em>字</span><button onclick="input_submit()">提交</button></div>
                    </div>
                    <div class="comment-replylist"></div>
                </div>
                <div class="comments_item_one_right">
                    <div class="user-item clearfix"><img
                                src="/uplodes/member/{{$v->pic}}"
                                width="25px" height="25px" alt="超***1" class="user-ico">
                        <div class="user-name">{{$v->nickname}}</div>
                    </div>
                    <div class="type-item"><span class="u-vip-level" style="color:gold">{{$v->permission}}</span> <span
                                class="u-addr"></span></div>
                    <div class="user-item" data-cid="2"><span class="user-access"><a
                                    href="http://app.jd.com/iphone.html" target="_blank"></a></span></div>
                </div>
            </div>
            @endif
            {{--单条评论  循环体结束--}}
        @endforeach
    </div>
    {{--差评--}}
    <div class="comment_list" style="display: none;">
        @foreach($data as $v)
            @if($v->score < 60 or $v->score==60)
            {{--单条评论  循环体--}}
            <div class="comments_item_one">
                <div class="comments_item_one_left">
                    <div class="grade-star g-star5"></div>
                    {{--<div class="comment-day type-item">收货7天后评论</div>--}}
                    <div class="comment-time type-item">{{date('Y-m-d H:i:s',$v->ptime)}}</div>
                    <div class="features type-item">
                        <ul class="clearfix">
                            <li>{{$v->score}}分</li>
                            <li>{{$v->keyword}}</li>
                        </ul>
                    </div>
                </div>
                <div class="comments_item_one_center">
                    <div class="p-comment">{{$v ->content}}</div>
                    <div class="p-otherFeatures">
                        <ul class="clearfix"></ul>
                    </div>
                    <div class="p-comment"><a class="div_display" data-replylz="1">回复（0）</a></div>
                    <div class="send_inner" style="display:none;"><textarea class="reply-input J-reply-input" placeholder="回复 {{$v->nickname}}：" maxlength="120"
                                                                            style="width:90%;resize:none; margin-top: 0px; margin-bottom: 0px; height: 32px;"></textarea>
                        <div style="float: right"><span class="txt-countdown">还可以输入<em>120</em>字</span><button onclick="input_submit()">提交</button></div>
                    </div>
                    <div class="comment-replylist"></div>
                </div>
                <div class="comments_item_one_right">
                    <div class="user-item clearfix"><img
                                src="/uplodes/member/{{$v->pic}}"
                                width="25px" height="25px" alt="超***1" class="user-ico">
                        <div class="user-name">{{$v->nickname}}</div>
                    </div>
                    <div class="type-item"><span class="u-vip-level" style="color:gold">{{$v->permission}}</span> <span
                                class="u-addr"></span></div>
                    <div class="user-item" data-cid="2"><span class="user-access"><a
                                    href="http://app.jd.com/iphone.html" target="_blank"></a></span></div>
                </div>
            </div>
            {{--单条评论  循环体结束--}}
            @endif
        @endforeach
    </div>
    <script>
        $('.comment_ul li').on('mouseover',function(){
            $(this).css('background','gray');
        }).on('mouseout',function(){
            $(this).css('background','none');
        });
        $('.shop_pj ul li').on('click',function(){
            $('.shop_pj ul li').css('background','#F5F2F2');
           $(this).css('background','red');
        });
        $('.div_display').on('click',function(){
            $('.send_inner').css('display','none');
            $(this).parent().next().css('display','block');
        });
        function input_submit(){
            $('.send_inner').css('display','none');
        }
        $('#all_comment').click(function(){
            $('.comment_list').css('display','none');
            $('.comment_list:eq(0)').css('display','block');
        });
        $('#good_comment').click(function(){
            $('.comment_list').css('display','none');
            $('.comment_list:eq(1)').css('display','block');
        });
        $('#well_comment').click(function(){
            $('.comment_list').css('display','none');
            $('.comment_list:eq(2)').css('display','block');
        });
        $('#bad_comment').click(function(){
            $('.comment_list').css('display','none');
            $('.comment_list:eq(3)').css('display','block');
        });
    </script>
@stop